<template>
<div class="first">
    <div class='box'>
        <el-form :model="dengmiQueryForm" ref="dengmiQueryForm" label-width="100px" class="demo-ruleForm" size="mini">
            <el-row>
                <div class="table">
               <el-col :span=15>
                    <el-form-item >
                        <span slot="label">
                            <span style="color:black;font-weight:bold; font-size:16px"><strong>客户：</strong></span>
                        </span>
                        <el-input v-model="customer.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                         <span slot="label">
                            <span style="color:black; font-size:16px"><strong>联系方式：</strong></span>
                        </span>
                        <el-input v-model="customer.contact"></el-input>
                    </el-form-item>
                </el-col>
                </div>
                <div class="btn">
                <el-col>
                <el-popover
                    placement="top"
                    width="200"
                    height="100"
                    v-model="visible">
                    <p>你确定要取消吗？取消后不会保存</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="back">确定</el-button>
              </div>
                    <el-button slot="reference" type="info" class="el-icon-error" style="margin-right:200px">取消</el-button>
              </el-popover>
                    <el-button type="success" @click="next" class="el-icon-success" style="margin-right:0px">下一步</el-button>
                </el-col>

                 <el-dialog title="填写入库信息" :visible.sync="dialogFormVisible" >
           <el-form :model="goods">
               <el-col :span="12">
             <el-form-item label="货物名称：" :label-width="formLabelWidth">
                <el-input v-model="goods.name" autocomplete="off" value="text"></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="货物种类：" :label-width="formLabelWidth">
                    <el-select  v-model="goods.category" placeholder="请选择">
          <el-option v-for="item in options"
                    :key="item"
                    :value="item"
                    :label="item"
                  >
          </el-option>
                    </el-select>

              </el-form-item>
              </el-col>
              <el-col :span="12">
               <el-form-item label="货物数量：" :label-width="formLabelWidth">
               <el-input v-model="goods.number" autocomplete="off"  value="number"></el-input>
            </el-form-item>
               </el-col>

                <el-col :span="12">
               <el-form-item  @click.native="Time"  label="入库时间：" :label-width="formLabelWidth">
                          <el-input v-model ="goods.warehouseEntryTime"  disabled="disabled"></el-input>
                    </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="入库温度：" :label-width="formLabelWidth">
                 <el-input v-model="goods.temperature" autocomplete="off"  value="number"></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="货物过期时间：" :label-width="formLabelWidth">
                  <el-date-picker
                               v-model ="goods.comGoBad"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择日期时间"
                                default-time="12:00:00">
                            </el-date-picker>
              </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="租借到期时间：" :label-width="formLabelWidth">
              <div class="block">
                            <el-date-picker
                                v-model ="goods.deadlineTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择日期时间"
                                default-time="12:00:00">
                            </el-date-picker>
                        </div>
              </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="入库员: " @click.native="user" :label-width="formLabelWidth" >
                    <el-input  v-model="goods.inuserName" disabled="disabled"></el-input>
               </el-form-item>
              </el-col>
               <el-col :span=5 style="float:left; margin-left:75px">
                    <el-form-item label="库区:" style="float:left;">
                        <div style="width:300px;heigth:50;">
                        <el-input v-model ="goods.locationId" style="float:left;margin-left:0px; width:150px;">{{goods.locationId}}</el-input>
                         <el-button  type="primary" round  @click="auto(goods)">自动生成</el-button>
                        </div>
                    </el-form-item>
                </el-col>
      </el-form>

          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
               <el-button type="primary" @click="submit(goods);dialogFormVisible = false">确 定</el-button>
           </div>
           </el-dialog>
                </div>
                <div class="step">
                <el-col>
                   <el-steps :active="1" align-center>
                     <el-step title="步骤 1" description="填写客户信息"></el-step>
                     <el-step title="步骤 2" description="填写货物信息"></el-step>
                   </el-steps>
                </el-col>
                </div>
            </el-row>
        </el-form>
    </div>
    </div>
</template>

<script>
import axios from '../../../axios'
export default {
  name: 'firstInput',
  data () {
    return {
      userName: localStorage.getItem("currentUser_name"),
      dengmiQueryForm: {
        mimian: '',
        mimu: '',
        visible: false
      },
      formLabelWidth: '120px',
      goods: {
        name: '',
        number: '',
        category: '',
        warehouseEntryTime: '',
        deadlineTime: '',
        locationId: '',
        temperature: '',
        comGoBad: '',
        // inUserId:'',
        inuserName: localStorage.getItem("currentUser_name")
      },
      options: [],
      dialogFormVisible: false,
      visible: false,
      customer: {
        name: '',
        contact: ''
      }
    }
  },
  methods: {
    user () {
      this.goods.inuserName = this.userName
      console.log(this.goods.inuserName)
      return this.goods.inuserName
    },
    getTime () {
      var date = new Date()
      var seperator1 = '-'
      var seperator2 = ':'
      // 以下代码依次是获取当前时间的年月日时分秒
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      var minute = date.getMinutes()
      var hour = date.getHours()
      var second = date.getSeconds()
      // 固定时间格式
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      if (hour >= 0 && hour <= 9) {
        hour = '0' + hour
      }
      if (minute >= 0 && minute <= 9) {
        minute = '0' + minute
      }
      if (second >= 0 && second <= 9) {
        second = '0' + second
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate +
      					' ' + hour + seperator2 + minute + seperator2 + second
	  return currentdate
    },

    Time () {
      this.getTime()
      this.goods.warehouseEntryTime = this.getTime()
    },
    next () {
      if (this.customer.name !== '' && this.customer.contact !== '') {
        this.dialogFormVisible = !this.dialogFormVisible
      } else {
        this.$message.error('客户的姓名和联系方式不能为空！')
      }
    },

    submit () {
      if (this.goods.name != ''  && this.goods.comGoBad != '' && this.goods.temperature != '' && this.goods.locationId != '' && this.goods.deadlineTime != '') {
        console.log(6666666666666666666666666666)
        axios({
          url: '/dp/in-goods/checkGoods',
          method: 'post',
          data: JSON.stringify(this.customer)
        }).then(res => {
          console.log(res)
          this.customer.name = '',
          this.customer.contact = '',
          this.goods = ''
        })
      } else {
        this.$message.error('所有输入框都不能为空！')
      }
    },

    auto (goods) {
      console.log(this.goods)

      axios({
        url: '/dp/in-goods/autoWare',
        method: 'post',
        data: JSON.stringify(goods)
      }).then(res => {
        console.log(res)
        console.log(res.data.data)
        this.goods.locationId = res.data.data
      }).catch(err => {
        //  console.log(err.response)
        this.$alert(err.response.data.msg, '请联系管理员', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
      })
    },
    /*  // 传客户数据给下一个页面
            // sessionStorage.setItem("customer",JSON.stringify(this.customer))
            if(this.customer.name!==''&&this.customer.contact!==''){
         this.$router.push({name:'nextInput',params:{name:this.customer.name, contact:this.customer.contact}});
            }else{
                this.$message.error('客户的姓名和联系方式不能为空！')
            }
            */

    back () {
      this.$router.push('/home')
    }
  },

  created () {
    // console.log(contact); console.log(customer);
    axios({
      url: '/dp/warehouse/queryGoodsCategory',
      method: 'get'
    }).then(res => {
      console.log(res.data.data)
      this.options = res.data.data,
      console.log(this.options[0])
    }).catch(err => {
      //  console.log(err.response)
      this.$alert(err.response.data.msg, '请联系管理员', {
        confirmButtonText: '确定',
        callback: action => {

        }
      })
    })
  }
}
</script>

<style lang='less' scoped>
/deep/.el-dialog{
    height: 500px;
    width: 850px;
}
/deep/input::-webkit-input-placeholder {
  color: #6e7375;
  font-weight:bold;
  font-size: 20px;
}

/deep/.el-dialog__body{
    height: 300px;
}
/deep/.el-input__inner {
  background-color: transparent !important;
  border: 1px solid #3d3f40;
  font-weight:bold;
  font-size: 22px;
}
/deep/.el-form-item__label {
  font-weight:bold;
  font-size:14px;
}

/deep/.el-input{
width: 280px;
}

.first{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    height: 670px;
    position: relative;
.box{
    margin-top: 100px;
    width:80%;
    height: 500px;
    vertical-align: middle;

 .table{
     margin-top:100px;
    margin-left: 300px;
    height: 120px;
    width: 800px;
    vertical-align: middle;

  overflow: hidden;
 }

.btn{
    margin-left: 400px;
    height: 50px;
    width: 500px;

 }

.step{
    margin-top: 30px;
    margin-left: 600px;
    width: 500px;
    height: 100px;
}
.label-style{
   color: red;
    font-size: 50px;
}

.dialog-footer{
    margin-top: 0px;
}
}
}
</style>
